import React, { PureComponent } from 'react'
import { connect } from 'react-redux' 
import { addNumber } from '../../store/teatures/counter'
import { fetchHomeMultidataAction } from '../../store/teatures/home'


export class Home extends PureComponent {
  componentDidMount() {
    this.props.fetchHomeMultidata()
  }
  
  render() {
    const { addNumber, counter } = this.props
    
    return (
      <div>
        <h2>Home Counter: {counter}</h2>
        <button onClick={e => addNumber(5)}>+5</button>
        <button onClick={e => addNumber(8)}>+8</button>
        <button onClick={e => addNumber(18)}>+18</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  counter: state.counter.counter
})

const mapDispatchToProps = (dispatch) => ({
  addNumber: (number) => dispatch(addNumber(number)),
  fetchHomeMultidata: () => dispatch(fetchHomeMultidataAction())
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)